<template>
  <div class="pt30">
    <Row :gutter="8" type="flex" justify="space-between">
      <Col flex="300px">
        <div class="box-sty">
          <h3>行政区划</h3>
          <div class="bgWhite">
            <Tree :show-line="true" :show-icon="true" :selectedKeys="[domainId]" :default-expanded-keys="['']" @select="onSelect"  >
              <TreeNode :title="item.domainName" :key="item.domainId" v-for="item in TreeNode">
              </TreeNode>

            </Tree>
          </div>
        </div>
      </Col>

      <Col flex="870px" class="bgWhite">
        <div class="apt-table">
          <h3 class="title2"><span>{{ title }}</span></h3>

          <Tabs v-model:activeKey="activeKey" @change="tabChange" type="card" >
            <TabPane key="5" tab="企业资质信息公示" v-if="aptApply">
              <aptNotice type="1" :domainId="domainId"></aptNotice>
            </TabPane>
            <TabPane key="6" tab="企业资质信息公告" v-if="aptApply">
              <aptNotice type="2" :domainId="domainId"></aptNotice>
            </TabPane>

            <TabPane key="3" tab="安全生产许可证公示" v-if="safetyApply">
              <safety type="3" :domainId="domainId"></safety>
            </TabPane>
            <TabPane key="4" tab="安全生产许可证公告" v-if="safetyApply">
              <safety type="4" :domainId="domainId"></safety>
            </TabPane>

            <TabPane key="1" tab="二级证书信息公示" v-if="qualApply">
              <constr type="5" :domainId="domainId"></constr>
            </TabPane>
            <TabPane key="2" tab="二级证书信息公告" v-if="qualApply">
              <constr type="6" :domainId="domainId"></constr>
            </TabPane>

            <TabPane key="7" tab="进疆登记企业信息公示" v-if="foreign">
              <register></register>
            </TabPane>

            <TabPane key="8" tab="造价企业承揽业务公示" v-if="foreign">
              <contract></contract>
            </TabPane>
          </Tabs>


        </div>
      </Col>
    </Row>
  </div>
</template>

<script lang="ts" >

interface config {
  authPermits: string[];
  domainId: string;
  domainName:string;
}
import {  Row, Col,  Tree , Tabs } from "ant-design-vue";
import {defineComponent, onMounted , ref , toRefs ,reactive} from "vue";
import { getAuthDomain } from '/@/api/public';
import { aptNotice , safety  , register , constr , contract} from './components';
export default defineComponent({
  name: "department",
  components: {
    Row, Col, Tree, TreeNode:Tree.TreeNode,
    Tabs, TabPane: Tabs.TabPane,
    TabContent: Tabs.TabContent,
    aptNotice , safety  , register ,constr , contract
  },
  setup() {

    let TreeNodeData:config[] = [];
    const TreeNode = ref<config[]>([]);
    const title = ref<string>('新疆维吾尔自治区住房和城乡建设厅');
    //const domainId = ref<string>('0g6w1-fn0g00-001uu');
    const domainId = ref<string>('');
    const activeKey = ref<string>('5');
    const showIems = reactive({
      aptApply:true,
      safetyApply:true,
      qualApply:true,
      foreign:true
    })

    const getAuthList = async () => {
      let result:config[] = await getAuthDomain();
      TreeNode.value = result;
      TreeNodeData = result
    }

    const onSelect = (selectedKeys: string[]) => {
      let key = selectedKeys[0];
      if(key){
        let selectedItem = TreeNodeData.filter(item=> item.domainId == key)[0];
        title.value = selectedItem.domainName;
        domainId.value = selectedItem.domainId;
        for ( let i in showIems){
          showIems[i] = false
        }


        selectedItem.authPermits.forEach((item,index)=>{
          if(item=='1'){
            showIems.qualApply=true
          } else if (item=='2'){
            showIems.safetyApply=true
          } else if (item=='3'){
            showIems.aptApply = true;
          } else if (item=='4'){
            showIems.foreign=true
          }

          if(index==0) {
            activeKey.value = String( (Number(item)*2) - 1 )
          }
        })

        if( showIems.qualApply && showIems.aptApply){  //临时
          activeKey.value = '5'
        }
        if( showIems.safetyApply && showIems.aptApply){  //临时
          activeKey.value = '5'
        }

      }
    };
    const tabChange = () =>{
      //console.log(1);
    }

    onMounted(getAuthList)

    return {
      onSelect , TreeNode , title , tabChange ,
      activeKey , ...toRefs(showIems), domainId
    };

  },
});
</script>


<style lang="less" scoped>

.box-sty{
  width: 300px;
}

.bgWhite{
  padding: 10px;
}

.apt-table{
  padding: 5px 15px 15px;

  .title2{
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #E0E3EA;

    span{
      padding-left: 10px;
      line-height: 1;
      border-left: 4px solid #0078FF;
    }
  }
}

::v-deep(.ant-tabs){
  width: 860px;

  .ant-tabs-bar{
    .ant-tabs-nav-container{
      height: auto !important;

      .ant-tabs-nav-scroll{
        white-space: normal !important;

        .ant-tabs-nav{
          padding-bottom: 10px;

          .ant-tabs-tab{
            width: 205px;
            margin: 0 10px 10px 0;
            text-align: center;

            &.ant-tabs-tab-active{
              border-color: #0078FF;
            }
          }
        }
      }

    }
  }

}

::v-deep(.ant-tree){
  li{
    .ant-tree-node-content-wrapper{
      width: 260px;
      height: auto;
      white-space: break-spaces;
    }
  }
}


</style>


